<template>
    <Person v-if="isShow" />
</template>

<!-- vue3 的写法, 不带便利插件 -->
<script lang="ts">
export default {
    name: 'Person',
}
</script>

<script lang="ts" setup>
import Person from './components/Person.vue'
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
let isShow = ref(true)

console.log("parent create")
// 挂载
onBeforeMount(() => {
    console.log("parent beforeMount")
})
onMounted(() => {
    console.log("parent mounted")
})
// 更新
onBeforeUpdate(() => {
    console.log("parent beforeUpdate")
})
onUpdated(() => {
    console.log("parent updated")
})
// 销毁
onBeforeUnmount(() => {
    console.log("parent beforeUnmount")
})
onUnmounted(() => {
    console.log("parent unmounted")
})
</script>
<style scoped></style>